<script lang="ts">
import fs from "/@/services/FileService";
import { ref } from "vue";
import { useRouter } from "vue-router";
import XuiBreadcrumb from "/@/components/XUII/breadcrumb.vue";
import XuiUpload from "/@/components/XUII/upload.vue";
import DropMenu from "/@/components/XUII/dropMenu.vue";
import XuiLink from "/@/components/XUII/link.vue";
import Preview from "./preview.vue";
import XuiButtonGroup from "/@/components/XUII/buttons/buttonGroup.vue";
import XuiButton from "/@/components/XUII/buttons/button.vue";
import XuiSimpleTable from "/@/components/XUII/tables/simpleTable.vue";
import XuiTableColum from "/@/components/XUII/tables/tableColum.vue";
import FileListView from "./FileListView.vue";
import XuiDialog from "/@/components/XUII/dialog/index.vue";
import { useDialog } from "/@/components/XUII/dialog";

import { FileView } from './FiewView'
import { FileExtInfo } from "/@/utils/FileHelper";
import '/@/components/explorer/explorer.scss'

export default {
  name: "",
  components: {
    XuiBreadcrumb,
    XuiUpload,
    DropMenu,
    XuiLink,
    Preview,
    XuiButtonGroup,
    XuiButton,
    XuiSimpleTable,
    XuiTableColum,
    FileListView,
    XuiDialog,
  },
  setup(props, context) {
    let fv = new FileView()
    let uploadFiles = ref()
    let isList = ref<boolean>(true)
    let { register, dialog } = useDialog()

    return {
      uploadFiles,
      isList,
      register,
      dialog,
      fv
    };
  },
  mounted() {
    let router = useRouter()
    let dir = router.currentRoute.value.query.dir as string
    this.fv.change_cur_path(dir)
  },
  beforeCreate() { },
  computed: {},
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(to)
    let dir = to.query.dir as string
    this.fv.change_cur_path(dir)
    next();
  },
  methods: {

    onFileChange(x: Event) {
      let target = x.target as HTMLInputElement;
      console.log(x);
      this.uploadFiles = target.files
    },
    uploadFile() {
      fs.upload(this.fv.viewData.cur_path, this.uploadFiles).then((x) => {
        console.log(x);
      });
    },
    getDownloadUrl(file: string) {
      return fs.getDownloadUrl(file)
    },
    getUploadUrl() {
      return fs.getUploadUrl(this.fv.viewData.cur_path)
    },
    download(file: string) {
      //fs.download(file)
    },
    changeView() {
      this.isList = !this.isList;
      console.log(this.isList);
    },
    async del0KFiles() {
      let delFiles = [];
      if (this.fv.viewData.data) {
        for (let i in this.fv.viewData.data) {
          let file = this.fv.viewData.data[i];
          if (file.isDir) {
            continue;
          }
          if (!file.size || file.size <= 0) {
            delFiles.push(file.fullName);
          }
        }
      }
      if (delFiles.length > 0) {
        await fs.delFiles(delFiles);
        await this.fv.refresh();
      }
    },
    uploadFileClick() {
      if (this.dialog) {
        this.dialog.open();
      }
    },
    async viewClick(f: FileExtInfo) {
      if (f.isDir) {
        this.$router.push(`/home?dir=${f.fullName}`)
      } else if (f.ext === 'pdf') {
        let { href } = this.$router.resolve({ name: 'reader_pdf', query: { path: f.fullName } })
        window.open(href, '_blank')
      } else if (f.ext === 'epub') {
        let { href } = this.$router.resolve({ name: 'reader_epub', query: { path: f.fullName } })
        window.open(href, '_blank')
      } else if (f.ext === 'md') {
        let { href } = this.$router.resolve({ name: 'reader_markdown', query: { path: f.fullName } })
        window.open(href, '_blank')
      } else if (f.ext === 'txt') {

      }
    }
  },
};
</script>
<template>
  <div class="file-body">
    <div class="file-view">
      <div class="file-head">
        <xui-breadcrumb :data="fv.viewData.breadcrumb_urls"></xui-breadcrumb>
        <xui-button-group>
          <xui-button @click="del0KFiles">删除0K文件</xui-button>
          <xui-button @click="changeView">{{
            isList? "切换图标视图": "却换列表视图"
          }}</xui-button>
          <xui-button @click="uploadFileClick">上传文件</xui-button>
        </xui-button-group>
        <div>
          <p>当前总数:{{ fv.viewData.total_count }}</p>
        </div>
      </div>
      <div class="view-body">
        <file-list-view v-if="isList && fv.viewData.data" :data="fv.viewData.data"
          @change="fv.refresh"></file-list-view>
        <preview @item-click="viewClick" v-if="!isList && fv.viewData.data" :data="fv.viewData.data" />
      </div>
    </div>
    <div class="file-detail"></div>

    <xui-dialog width="35%" @register="register"></xui-dialog>
  </div>
</template>
<style lang="scss" scoped>
.file-body {
  display: flex;

  .file-view {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .file-head {
      height: 100px;
    }

    .view-body {
      height: calc(100vh - 100px);
      flex: 1;
      overflow-y: auto;
    }
  }

  .file-detail {
    width: 350px;
  }
}
</style>
